<template>
	<view class="detail">
		<!-- 广告 + 收藏 -->
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000"
				:circular="true">
				<swiper-item class="item" v-for="item in info.skuList" :key="item.id">
					<image class="img" :src="item.pic"></image>
				</swiper-item>
			</swiper>
			<!-- 收藏 -->
			<view class="collected" @tap="collected(info)">
				<uni-icons :color="isCollected ? '#ff0000' : '#ffffff' " type="star" size="30"></uni-icons>
			</view>
		</view>
		<!-- 价格 + 名字 + 介绍 -->
		<view class="content">
			<view class="price">
				<view class="num">
					￥
					<view class="big">{{ info.price }}</view>
					.00
				</view>
				<view class="text">没有促销使用原价</view>
			</view>
			<view class="name">{{ info.name }}</view>
			<view class="desc">{{ info.description }}</view>
		</view>
		<!-- 富文本 -->
		<view class="rich-text">
			<!-- 富文本插件 -->
			<mp-html :content="info.detailMobileHtml" :tag-style="obj" />
		</view>
		<!-- 客服 + 购物车 + 购买 -->
		<view class="footer">
			<image class="icon" src="../../../../static/icons/kf.png"></image>
			<view class="right">
				<view class="cart" @tap="openMask(1)">
					添加到购物车
				</view>
				<view class="buy" @tap="openMask(2)">
					立即购买
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-if='isShow' @touchmove.stop.prevent='' @tap="cancelMask">
			<view class="card" @tap.stop>
				<view class="top">
					<image class="img" :src="pic"></image>
					<view class="text">
						<view class="name">{{ info.name }}</view>
						<view class="stock">库存数量: {{ stock }}</view>
					</view>
					<image class="icon" src="../../../../static/icons/x.png" @tap="cancelMask"></image>
				</view>
				<view class="info">
					<view class="title">商品选择</view>
					<view class="text">
						<view class="box" :class="borderIndex == index ? 'border' : ''" v-for="(item,index) in spData" :key="item.key" @tap="borderEvents(index)">
							<view class="color">颜色:{{ item[0].value }}</view>
							<view class="size">大小:{{ item[1].value }}</view>
						</view>
					</view>
				</view>
				<view class="serve">
					<view class="title">特色服务</view>
					<view class="text">送货上门</view>
					<view class="text">上门安装</view>
				</view>
				<view class="line"></view>
				<view class="num">
					<view class="text">购买数量</view>
					<uni-number-box v-model="num" :min='0'></uni-number-box>
				</view>
				<view class="btn" @tap="confirm">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import mix from '../../../../mixins/index.js';
	import { productDetail,addCart } from '../../../../api/kind/index.js';
	import { addPreOrder } from '../../../../api/order/index.js'
	export default {
		mixins:[mix],
		data() {
			return {
				info: {}, // 商品 - 详情
				isCollected: false, // 收集 - 是否选中
				obj: {
					img: "width:100%;display:block;"
				}, // 详情 - 富文本样式
				isShow: false, // 遮罩层 - 显示隐藏
				pic: '', // 遮罩层 - 图片
				stock: '', // 遮罩层 - 库存
				num: 1, // 遮罩层 - 数量
				spData:[], // 遮罩层 - 颜色 + 大小
				borderIndex: 0, // 遮罩层 - 商品选择 - 边框切换
				currentStatus: 1, // 判断 - 添加购物车|立即购买
				// productId: "", // 添加购物车 - 商品id
				// productSkuId: "", // 添加购物车 - 商品skuId
				// quantity: 0, // 添加购物车 - 数量
			};
		},
		onLoad(options) {
			var _this = this;
			// 接口 - 获取数据
			productDetail(options.id).then(res => {
				this.info = res.data.data.product;
				this.pic = res.data.data.product.skuList[0].pic;
				this.stock = res.data.data.product.skuList[0].stock;
				// 提取spData + JSON数组类型的字符串转为JSON对象
				this.spData = res.data.data.product.skuList.map(ele=>{
					return JSON.parse(ele.spData)
				});
				// 导航标题 - 动态设置
				uni.setNavigationBarTitle({
					title: res.data.data.product.name
				})
			});
			// 本地存储 - 获取
			var collectedLsit = uni.getStorageSync("collectedLsit");
			if(collectedLsit == []){
				this.isCollected = false;
			}else{
				// 查找当前id
				var item = collectedLsit.find(ele=>ele.id == options.id);
				// 判断有无当前id
				if(item){
					// 红色
					this.isCollected = true;
				}else{
					// 白色
					this.isCollected = false;
				}
			}
		},
		methods:{
			// 遮罩层 - 商品选择 - 边框切换
			borderEvents(val){
				this.borderIndex = val;
			},
			// 确定
			confirm(){
				// 判断 - 是否登录
				if(this.checkLogin()){
					// 判断 - 添加到购物车|立即购买
					if(this.currentStatus == 1){
						// 添加到购物车
						addCart({
						  "productId": this.info.id, // 添加到购物车 - 商品id
						  "productSkuId": this.info.skuList[this.borderIndex].id, // 添加到购物车 - 商品skuId
						  "quantity": this.num // 添加到购物车 - 数量
						}).then(res=>{
							uni.showToast({
								title: "添加成功"
							})
						})
					}else{
						// 立即购买
						addPreOrder({
							"orderItemList":[{
								"productId": this.info.id,
								"productQuantity": this.num,
								"productSkuId": this.info.skuList[this.borderIndex].id
							}]
						}).then(res=>{
							// 判断 - 是否购买成功
							if(res.data.success){
								uni.showToast({
									title: '购买成功,1s后前往订单页面!'
								});
								// 跳转 - 1s后
								setTimeout(function(){
									// 跳转 - 支付页面 - 传递订单id
									uni.navigateTo({
										url: `../../../order/confirmOrder/confirmOrder?id=${res.data.data.orderId}`
									})
								},1000)
							}else{
								uni.showToast({
									title: res.data.message,
									icon: "error"
								});
							}
						})
					}
				}
			},
			// 遮罩层 - 关闭
			cancelMask(){
				this.isShow = false;
			},
			// 添加到购物车|立即购买 - 遮罩层 - 打开
			openMask(val){
				this.isShow = true;
				// 当前点击 - 添加购物车|立即购买
				this.currentStatus = val;
			},
			// 收藏
			collected(val){
				// 本地存储 - 获取
				var collectedLsit = uni.getStorageSync("collectedLsit");
				// 判断collected - 是否有数据
				if(collectedLsit == ''){
					// 收藏 - 添加
					uni.setStorageSync("collectedLsit",[val]);
					// 红色
					this.isCollected = true;
				}else{
					// 查找当前id
					var item = collectedLsit.find(ele=>ele.id == val.id);
					// 查找下标
					var index = collectedLsit.findIndex(ele=>ele.id == val.id);
					// 判断是否有当前id
					if(item){
						// 点击 - 取消收藏 - 删除id
						collectedLsit.splice(index,1);
						// 重新存储id
						uni.setStorageSync("collectedLsit",collectedLsit);
						// 白色
						this.isCollected = false;
					}else{
						// 收藏 - 添加
						collectedLsit.push(val);
						// 重新存储id
						uni.setStorageSync("collectedLsit",collectedLsit);
						// 红色
						this.isCollected = true;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>
